<!-- 行为 -->
 <!-- lang="ts" :支持ts语法  setup：是 Vue3 的组合式 API 写法 -->
<script lang="ts" setup>
const clickHandle = ()=>{
  alert('点击成功')
}
const onMouseenter = ()=>{
  console.log('输入移入')
}
const onMouseleave =()=>{
  console.log('输入移出')
}
</script>

<!-- 结构 -->
 <template>
  <button @click="clickHandle()">点我</button>
  <div class="box" @mouseenter="onMouseenter()" @mouseleave="onMouseleave()">鼠标移入移出</div>

  
 </template>

 <!-- 样式 -->
  <!-- scoped:样式 只对当前组件有效 -->
  <style scoped>
  .box{
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>